The render() method is the only required method in a class component. It is called after static getDerivedStateFromProps and before componentDidMount. It is used to render the UI of the component.
React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
String and numbers. These are rendered as text nodes in the DOM.
Booleans or null or undefined. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean).
render() will not be invoked if shouldComponentUpdate() returns false
The render() function should be pure, meaning that it does not modify the component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.
If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.